<template>
  <page-layout>
    <div slot="toolbar">
      <el-button size="small" round type="primary" @click="submit">提交</el-button>
      <el-button size="small" round type="default" @click="back">返回</el-button>
    </div>
    <el-card style="width: 540px;">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>

      <el-form ref="form" :model="passForm" label-width="80px" class="demo-form">
        <el-form-item prop="oldPassword" label="原密码" :rules="[
            { required: true, message: '请填写原密码', trigger: 'change,blur' },
            { min: 6, message: '密码长度至少6位', trigger: 'blur' }
          ]">
          <el-input type="password" v-model="passForm.oldPassword"></el-input>
        </el-form-item>

        <el-form-item prop="newPassword" label="新密码" :rules="[
            { required: true, message: '请设置新密码', trigger: 'change,blur' },
            { min: 6, message: '密码长度至少6位', trigger: 'blur' }
          ]">
          <el-input type="password" v-model="passForm.newPassword"></el-input>
        </el-form-item>

        <el-form-item prop="rePassword" label="重复密码" :rules="[
            { required: true, message: '请再次填写新密码', trigger: 'change,blur' },
            { validator: validateRePass, trigger: 'change,blur' }
          ]">
          <el-input type="password" v-model="passForm.rePassword"></el-input>
        </el-form-item>
      </el-form>

    </el-card>
  </page-layout>
</template>
<script>
import md5 from "js-md5";
import PageLayout from "@/components/page-layout";
export default {
  created() {},
  mounted() {},
  data() {
    return {
      passForm: {
        oldPassword: "",
        newPassword: "",
        rePassword: ""
      },
      validateRePass: (rule, value, callback) => {
        if (value !== this.passForm.newPassword) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      }
    };
  },
  computed: {},
  methods: {
    submit() {
      this.$store
        .dispatch("updatePassword", {
          oldPassword: md5(this.passForm.oldPassword),
          newPassword: md5(this.passForm.newPassword)
        })
        .then(ret => {
          this.$notify({
            title: "密码修改成功",
            type: "success"
          });
          this.$router.push({ name: "dashboard" });
        });
    },
    back() {
      this.$router.push({ name: "dashboard" });
    }
  },
  components: {
    PageLayout
  }
};
</script>
<style>
</style>
